| 原来，这才是html+css导出word最佳方式！ | 您所在的位置：网站首页 › word转html js › 原来，这才是html+css导出word最佳方式！ |
原来，这才是html+css导出word最佳方式！
|
转个word很难吗？
对于任何一个在线富文本写作产品，导出功能是必不可少的，其中导出word是其中最常见的选项，但是很多产品导出的word，比如说Jira，格式就有不同程度的失真. 仔细分析下来，解决这个思路的主要有两种： 硬转：使用OpenXml的SDK，逐一匹配html标签和样式css，相当于用OpenXml实现了一个html+css的渲染层。 偷懒：想办法把html+css的内容当成word的一部分，相当于用web视图打开。当时，我花了一定的时间，在两个方向上分别做了调研。 硬转的思路，直觉上工作量就极大，而且很容易出Bug，毕竟那么多组合情况需要考虑。值得参考的项目是html2openxml，1W多行只能实现html的转换，还不包括css。 不是没想过，限制输出html的排版，比如用固定的id代表固定的部分，css样式也只支持特定的几种，但后来讨论下来，觉得这种方法，需要前后端确定好规则，而在当时快速迭代的时期，这无疑会增加开发成本。 而偷懒这条路，能够搜索到项目，都是借用了word中altchunks的特性，比如:html-docx-js、html2docx。 问题也很明显， 不支持float之类的样式，对图片的支持也需要自己写代码转base64，然后嵌进标签里。这些虽然麻烦些，但是还是可以tweak。 最麻烦的是，这种格式的word，兼容性很差，在微信中、mac上打不开。于是，我一度卡在这里很久，直到我发现…… 原来，word才是转word的最佳工具转机来的也很突然，就是我发现用word打开一个带html+css的文件后，再另存成word，不仅格式得到了保留，图片也在，而且兼容性也还不错！真是 踏破铁鞋无觅处，得来全不费工夫。 问题来了，怎么把这一步程序化呢？ 这下终于可以用上过去.net的开发经验了，C#是可以通过com组件的方式操作word，但前提是运行程序的机器上必须装word才行。 核心代码，也是非常的简单： 首先引用Microsoft.Office.Interop.Word，调用的代码如下: var word = new Application {Visible = false}; var doc = word.Documents.Open(htmlFilePath, Format: WdOpenFormat.wdOpenFormatWebPages, ReadOnly: false); doc.SaveAs2000(wordFilePath, WdSaveFormat.wdFormatDocumentDefault, ReadOnlyRecommended: false); doc.Close(); word.quit() 复制代码是不是很简单呢？ 而这里唯一还需要处理的就是图片，如果不做处理，图片还是以链接的方式存储的。 一方面，每次打开的时候需要重复下载，好处是word文件比较小，但缺点是受限于网速，可能会出现图片加载不出来的情况; 另一方面时，如果图片没有指定宽度和高度，当图片的尺寸大于文档的尺寸时，显示的效果就很差。 估化的思路很简单，即强行把图片的尺寸拉伸到一页可以显示下，同时将图片链接转成内嵌的图片。 foreach (InlineShape s in doc.InlineShapes) { var inlineShape = s; if (inlineShape.Type != WdInlineShapeType.wdInlineShapePicture && inlineShape.Type != WdInlineShapeType.wdInlineShapeLinkedPicture) { continue; } if (inlineShape.Type == WdInlineShapeType.wdInlineShapeLinkedPicture) { inlineShape.LinkFormat.SavePictureWithDocument = true; inlineShape.LinkFormat.BreakLink(); } if (inlineShape.Width > this._documentWidth) { inlineShape.LockAspectRatio = MsoTriState.msoTrue; inlineShape.Width = this._documentWidth; } if (inlineShape.Height > this._documentHeight) { inlineShape.LockAspectRatio = MsoTriState.msoTrue; inlineShape.Height = this._documentHeight; } } 复制代码到此，核心的转换代码就已经完成。（需要提醒各位看官的是，这种方法是不支持float和flex的css样式的。） 剩下的工作请注意：上述代码是基于.net framework写的，运行的机器上还必须有word。 如果要对外提供服务的话，考虑到跨语言跨平台，最好的方式即提供http接口。 而这对一个不熟悉.net的人，那要学习的东西还是不少的。 楼主我就好人做到底，在上述的核心代码上用WCF的webHttpBinding实现了一个的http服务，同时使用log4net实现了日志功能。 最终的程序的workflow是 用户发送html+css内容到http服务 先把html+css存成文件 读取html文件，然后另存为word文件 返回下载链接 使用nginx映射目录中的文件，实现下载功能所有代码开源在HtmlToWord，如果它对你有用，欢迎点个star. |
【本文地址】